<template>
  <view :data-theme="g.theme" class="log">
    <view>
      <BasicComponents></BasicComponents>
      <CustomNavbar title="日志" />
      <ProTable
        ref="proTableBox"
        :form-options="searchForm.options"
        :use-data="dataGrid.useData"
        :data="dataGrid.data"
        :init-param="dataGrid.initParam"
        :pagination="true"
        :columns="dataGrid.columns"
        :request-api="dayLogFindDayLog"
        :data-callback="dataCallback"
        @add-page-skip="skipPage"
        @get-search-model="form => (searchForm.form = form)"
      >
        <template #bottom="{ item }">
          <GlobalButton :button-list="dataGrid.rowButtonList" :row-data="item"></GlobalButton>
        </template>
      </ProTable>
      <MModal
        v-model:visible="modalParams.visible"
        :params="modalParams.params"
        :content="modalParams.content"
        :api="modalParams.api"
        :callback-method="modalParams.callbackMethod"
      ></MModal>
    </view>
    <BottomButton @right-click="skipPage"> </BottomButton>
  </view>
</template>
<script setup lang="ts">
import { ProTableInstance } from "@/components/ProTable/interface";
import { dayLogFindDayLog } from "$api/stock";
import { useDataGrid } from "./hooks/use-dataGrid";
import { useSearchForm } from "./hooks/use-searchForm";
const g = useThemeStore();
let proTableBox = ref<ProTableInstance>();

// 页面跳转
const skipPage = () => {
  uni.navigateTo({ url: "/pages/log/add/index" });
};

const { dataGrid, modalParams, dataCallback } = useDataGrid(proTableBox);
const { searchForm } = useSearchForm();

onShow(() => {
  nextTick(() => {
    proTableBox.value.search();
  });
});
</script>
<style lang="scss">
.log {
  .table-row {
    .label {
      width: 1px !important;
      flex: 0;
      flex-shrink: 0;
    }
    .value,
    .v {
      width: 100% !important;
      text-align: left !important;
    }
  }
}
</style>
